vue

2023-04-15 12:12| 来源: 网络整理| 查看: 265

Vue Easy Slider是一个简单且功能简洁的vue轮播图组件。Vue Easy Slider提供了切换动画、切换时长等轮播组件通用的参数调节，还提供的插槽（slot）能放置任何内容。

Vue Easy Slider以移动端为主，触摸操作体验流畅，同时兼容PC端鼠标操作。Vue Easy Slider提供Vue源码，可以进行样式定制或二次开发。

使用方法安装

如果您想使用Vue Easy Slider轮播图插件，首先您需要安装它，命令如下：

npm i -S vue-easy-slider 使用

Page{{ index + 1 }}

import { Slider, SliderItem } from "vue-easy-slider"; export default { name: "App", components: { Slider, SliderItem }, data() { return { list: [], sliderValue: 2 }; }, methods: { changeIndex(index) { this.sliderValue = index; } }, mounted() { setTimeout( () => (this.list = [ { backgroundColor: "#3f51b5", width: "100%", height: "100%" }, { backgroundColor: "#eee", width: "100%", height: "100%" }, { backgroundColor: "#f44336", width: "100%", height: "100%" }, { backgroundColor: "#eee", width: "100%", height: "100%" } ]), 1000 ); } }; #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } p { margin: 0; } 配置参数

Vue Easy Slider轮播图插件的可用配置参数如下：

width：轮播图的宽度，默认值为auto。 height：轮播图的高度，默认值为300px。 touch：是否启用触摸功能。默认值为true。 animation：动画效果，可选值为：'normal', 'fade'，默认值为'normal'。 autoplay：是否自动播放，默认值为true。 stopOnHover：是否在鼠标滑过时停止播放，默认值为false。 interval：自动播放的时间间隔，默认值为3000(ms)。 speed：自动播放的速度，默认值为500(ms)。 indicators：在什么地方显示圆点。可选值有：'center', 'left', 'right', false，默认值为'center'，设置为false时，隐藏圆点。 control-btn：是否显示左右控制按钮，默认值为true。 before-next：切换到下一个slide前的回调函数。 before-previous：切换到前一个slide前的回调函数。事件

Vue Easy Slider轮播图插件的可用事件如下：

change：在slide序号发生改变时触发。 next：在next按钮被点击时触发。 previous：在previous按钮被点击时触发。插槽

Vue Easy Slider轮播图插件有下面的可用插槽：

default：slide项的内容。 loading：Loading占位内容。

例如

custom loading ...

github网址：https://github.com/shhdgit/vue-easy-slider/

【本文地址】

公司简介

联系我们